<template>
  <div class="page photos-page">
    <div v-for="(item, index) in list" :key="index" class="photo-item">
      <div class="row header">
        <div class="title">{{item.title}}</div>
        <div class="more" @click="more(index)">查看更多》</div>
      </div>
      <div v-if="isPC" class="row photos">
        <div class="item" v-for="(photo, i) in item.items" :key="i">
          <img @click="toDetail(photo.detail)"  :src="photo.cover" />
          <div class="mask">
            <a :download="index" :href="photo.download"><img src="../assets/download.png"/></a>
          </div>
        </div>
      </div>
      <div v-if="!isPC" class="row photos">
        <div class="phone-col col">
          <div class="item" v-for="(photo, i) in item.items[0]" :key="i">
            <img @click="toDetail(photo.detail)"  :src="photo.cover" />
            <div class="mask">
              <a :download="index" :href="photo.download"><img src="../assets/download.png"/></a>
            </div>
          </div>
        </div>
        <div class="phone-col col">
          <div class="item" v-for="(photo, i) in item.items[1]" :key="i">
            <img @click="toDetail(photo.detail)"  :src="photo.cover" />
            <div class="mask">
              <a :download="index" :href="photo.download"><img src="../assets/download.png"/></a>
            </div>
          </div>        
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import photos from '../data/photos'

export default {
  name: 'photos',
  data() {
    return {
      list: photos,
      isPC: true
    }
  },
  methods: {
    more(i) {
      this.$router.push('/photoList/' + i)
    },
    toDetail(url) {
      window.open(url)
    },
    initImg() {
      if(document.body.clientWidth <= 768) { // 手机端 col布局,分两列
        var myList = []
        this.isPC = false
        for(let i=0;i<photos.length;i++) {
          let len = photos[i].items.length
          let items = photos[i].items
          if(len > 6) {
            items = photos[i].items.slice(0, 6)
            len = 6
          }
          let t = parseInt(len/2)
          let res
          if(len%2 == 0) {
            res = [items.slice(0, t), items.slice(t, len)]
          } else {
            res = [items.slice(0, t+1), items.slice(t+1, len)]
          }
          myList.push({title: photos[i].title, items: res})
        }
        this.list = myList
      } else {
        this.isPC = true
      }    
    }
  },
  created() {
    this.initImg()
  },
}
</script>

<style>
  .photo-item {
    overflow: hidden;
    flex-wrap: wrap;
    margin-bottom: 30px;
  }
  .photos-page .photos {
    flex-wrap: wrap;
  }
  .photos img {
    height: 226px;
  }
  .photos-page .header {
    border-bottom: 1px solid #353535;
    margin-bottom: 12px;
    padding: 12px 0;
    justify-content: space-between;
  }
  .photos-page .header .title {
    font-weight: bold;
    font-size: 18px;
  }
  .photos-page .header .more {
    color: #ba4557;
    cursor: pointer;
  }
  .photos-page .more:hover {
    text-decoration: underline;
  }
  .photos-page .item {
    position: relative;
    margin-right: 1px;
    margin-bottom: 1px;
  }
  .photos-page .mask {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 44px;
    display: none;
  }
  .photos-page .mask img {
    width: 28px;
    height: 28px;
  }
  .photos-page .item:hover .mask {
    display: block;
  }
  .photos-page .mask a {
    position: absolute;
    right: 4px;
    bottom: 4px;
  }
  .photos-page .photos img:hover .mask {
    display: block;
  }
  @media screen and (max-width: 768px){
    .photos {
      width: 100%;
      align-items: flex-start;
    }
    .photos .item {
      width: 99%;
    }
    .photos .item img {
      width: 100%;
      height: auto;
    }
    .photos-page .header {
      padding: 12px;
    }
    .phone-col {
      width: 50%;
    }
  }
</style>

